<template>
	<view class="comtent">
		<!-- 会员中心头部 start -->
		<view class="header">
			<navigator hover-class="none" url="./info" class="she_loa">
			<image src="../../static/she.png" class="she_img" mode="widthFix"></image>
			</navigator>
			<view class="header_box">
				<view class="header_box_yang">
					<view class="header_box_yang_tit">
						潮人豆
					</view>
					<view class="dou_yu">14.66</view>
					<navigator hover-class="none" url="./recharge" class="yang_loa">
						充值
					</navigator>
				</view>
					<view class="header_box_cen">
						<image src="http://wx.crh2009.com/addons/ewei_shopv2/static/images/noface.png"
						class="tou_img" mode="widthFix"></image>
						<view class="name"> 白芷</view>
						<view class="dengji">[普通等级]</view>
					</view>
					<view class="header_box_yang">
						<view class="header_box_yang_tit">
							积分
						</view>
						<view class="dou_yu">121</view>
						<navigator hover-class="none" url="" class="yang_loa yang_loa2">
							会员规则
						</navigator>
					</view>
			</view>
			<view class="kefubox">
				<text class="kefu_text">
				您的客服微信: 
				<text @tap="getwx()">13728435091</text>				
				</text>
			</view>
		</view>
		<!-- 会员中心头部 end -->
		<view class="label">
			<view class="label_box">
			<view class="label_left">
				<image src="../../static/WechatIMG720.png" mode="widthFix" class="label_left_img"></image>
				我的订单
			</view>
			<view class="label_right">
				<navigator url="./order" hover-class="none" class="label_right_a">
				<view class="label_right_a_span">查看全部订单</view>
				<image src="../../static/rightimg.png" class="right_img" mode="widthFix"></image>
				</navigator>
			</view>
			</view>
		</view>
		<view class="dan_ul">
			<navigator hover-class="none" url="./order?order=daifukuan" class="dan_li">
				<view class="badge">3</view>
				<image src="../../static/fu.png" class="dan_li_img" mode="widthFix"></image>
				<view class="dan_li_span">待付款</view>
			</navigator>
			<navigator hover-class="none" url="./order?order=daifahuo" class="dan_li">
				<image src="../../static/fa.png" class="dan_li_img" mode="widthFix"></image>
				<view class="dan_li_span">待发货</view>
			</navigator>
			<navigator hover-class="none" url="./order?order=daishouhuo" class="dan_li">
				<view class="badge">1</view>
				<image src="../../static/shou.png" class="dan_li_img" mode="widthFix"></image>
				<view class="dan_li_span">待收货</view>
			</navigator>
			<navigator hover-class="none" url="./tuihuan" class="dan_li" style="border-right:2rpx solid #ebebeb;">
				<image src="../../static/tui.png" class="dan_li_img" mode="widthFix"></image>
				<view class="dan_li_span">退换货</view>
			</navigator>
			<navigator hover-class="none" url="./zhouqigou" class="dan_li">
				<image src="../../static/zhou.png" class="dan_li_img" mode="widthFix"></image>
				<view class="dan_li_span">周期购</view>
			</navigator>
		</view>
		
		<!-- 列表 start -->
		<view class="mem_ul">
			<view class="mem_li" style="margin-top:20rpx;">
			<navigator hover-class="none" url="../mobile/qiandao" class="mem_a">
				<view class="men_a_left">
					<image src="../../static/mem1.png" class="men_a_left_img" mode="widthFix"></image>
					签到亮佣
				</view>
				<view class="men_a_right">
					<image src="../../static/rightimg.png" class="men_a_right_img" mode="widthFix"></image>
				</view>
			</navigator>
			</view>
			
			<view class="mem_li" style="margin-top:20rpx;">
			<navigator hover-class="none" url="" class="mem_a">
				<view class="men_a_left">
					<image src="../../static/mem2.png" class="men_a_left_img" mode="widthFix"></image>
					新人专享
				</view>
				<view class="men_a_right">
					<image src="../../static/rightimg.png" class="men_a_right_img" mode="widthFix"></image>
				</view>
			</navigator>
			</view>
			
			<view class="mem_li" style="margin-top:20rpx;">
			<navigator hover-class="none" url="../mobile/coupon" class="mem_a">
				<view class="men_a_left">
					<image src="../../static/mem3.png" class="men_a_left_img" mode="widthFix"></image>
					我的代金券
				</view>
				<view class="men_a_right">
					<image src="../../static/rightimg.png" class="men_a_right_img" mode="widthFix"></image>
				</view>
			</navigator>
			</view>
			<view class="mem_li">
			<navigator hover-class="none" url="" class="mem_a">
				<view class="men_a_left">
					<image src="../../static/mem4.png" class="men_a_left_img" mode="widthFix"></image>
					早鸟福利
				</view>
				<view class="men_a_right">
					<image src="../../static/rightimg.png" class="men_a_right_img" mode="widthFix"></image>
				</view>
			</navigator>
			</view>
			
			<view class="mem_li" style="margin-top:20rpx;">
			<navigator hover-class="none" url="../rw/rw" class="mem_a">
				<view class="men_a_left">
					<image src="../../static/mem5.png" class="men_a_left_img" mode="widthFix"></image>
					任务中心
				</view>
				<view class="men_a_right">
					<image src="../../static/rightimg.png" class="men_a_right_img" mode="widthFix"></image>
				</view>
			</navigator>
			</view>
			
			<view class="mem_li" style="margin-top:20rpx;">
			<navigator hover-class="none" url="" class="mem_a">
				<view class="men_a_left">
					<image src="../../static/mem6.png" class="men_a_left_img" mode="widthFix"></image>
					平台简介
				</view>
				<view class="men_a_right">
					<image src="../../static/rightimg.png" class="men_a_right_img" mode="widthFix"></image>
				</view>
			</navigator>
			</view>
			
			<view class="mem_li" style="margin-top:20rpx;">
			<navigator hover-class="none" url="./cart" class="mem_a">
				<view class="men_a_left">
					<image src="../../static/mem7.png" class="men_a_left_img" mode="widthFix"></image>
					我的购物车
				</view>
				<view class="men_a_right">
					<image src="../../static/rightimg.png" class="men_a_right_img" mode="widthFix"></image>
				</view>
			</navigator>
			</view>
			<view class="mem_li">
			<navigator hover-class="none" url="./favorite" class="mem_a">
				<view class="men_a_left">
					<image src="../../static/mem8.png" class="men_a_left_img" mode="widthFix"></image>
					我的关注
				</view>
				<view class="men_a_right">
					<image src="../../static/rightimg.png" class="men_a_right_img" mode="widthFix"></image>
				</view>
			</navigator>
			</view>
			<view class="mem_li">
			<navigator hover-class="none" url="./history" class="mem_a">
				<view class="men_a_left">
					<image src="../../static/mem9.png" class="men_a_left_img" mode="widthFix"></image>
					我的足迹
				</view>
				<view class="men_a_right">
					<image src="../../static/rightimg.png" class="men_a_right_img" mode="widthFix"></image>
				</view>
			</navigator>
			</view>
			
			<view class="mem_li" style="margin-top:20rpx;">
			<navigator hover-class="none" url="./log" class="mem_a">
				<view class="men_a_left">
					<image src="../../static/mem10.png" class="men_a_left_img" mode="widthFix"></image>
					充值记录
				</view>
				<view class="men_a_right">
					<image src="../../static/rightimg.png" class="men_a_right_img" mode="widthFix"></image>
				</view>
			</navigator>
			</view>
			
			<view class="mem_li" style="margin-top:20rpx;">
			<navigator hover-class="none" url="./address" class="mem_a">
				<view class="men_a_left">
					<image src="../../static/mem11.png" class="men_a_left_img" mode="widthFix"></image>
					收货地址管理
				</view>
				<view class="men_a_right">
					<image src="../../static/rightimg.png" class="men_a_right_img" mode="widthFix"></image>
				</view>
			</navigator>
			</view>
			
		</view>
		<!-- 列表 end -->
		
		<navigator class="dks" hover-class="none" url="">
			修改密码
		</navigator>
		<view class="kmss">
			退出登录
		</view>
		
		
		<!-- 商品推荐 start -->
		<view class="goods_label">
			<image src="../../static/start.png" class="start_img" mode="widthFix"></image>
			商品推荐
		</view>
		<!-- 商品列表组件 -->
		<view style="margin-top:-10rpx">
		<goodslist></goodslist>
		</view>
		<!-- 商品推荐 end -->
		
		<!-- 侧边栏 -->
		<fixce></fixce> 
		<!-- 回到顶部start -->
		<view class="top" :style="{'display':(topState===true? 'block':'none')}">
		<image src="../../static/huitop.png" class="huitop"
		@tap="top()">
		</view>
		</image>
			<!-- 回到顶部end-->
			
	</view>
</template>

<script>
	import fixce from '../../component/fixce.vue';  //侧边栏组件
	import goodslist from '../../component/goodslist.vue';//商品列表组件
	export default{
		components:{
		fixce,
		goodslist
		},
		data (){
			return{
				 topState:false,
			}
		},
		// 回到顶部start
		onPageScroll(e){ //根据距离顶部距离是否显示回到顶部按钮
		    if(e.scrollTop>200){ //当距离大于200时显示回到顶部按钮
		        this.topState = true
		    }else{ //当距离小于200时关闭回到顶部按钮
		        this.topState = false
		    }
		},
		// 回到顶部end
		methods: {
			top() { //回到顶部  
		　　　　uni.pageScrollTo({ 
		　　　　　　scrollTop: 0, duration: 300 
		　　　　}); 
		　　},
		getwx (){
			uni.getClipboardData({  //复制微信号
			    success: function (res) {
			        console.log(res.data);
					uni.showToast({
					    title: '复制成功',
					    duration: 2000
					});
			    }
			});
		}
		},
		created (){
			//设置微信号
			uni.setClipboardData({
			    data: '13728435091', 
			    success: function () {
					uni.hideToast();
			    }
			});
		}
	}
</script>

<style>
	.comtent{
		padding-bottom: 30rpx;
		background-color: rgb(243,243,243);
	}
	.header{
		width:100%;
		background: #ff80c0;
		display: flex;
		flex-wrap:wrap;
		justify-content: space-around;
		align-items: center;
		padding:40rpx 0;
		position: relative;
	}
	.header_box{
		width:90%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.header_box_yang{
		width:20%;
		text-align: center;
	}
	.header_box_yang_tit{
		color:#fff;
		font-weight: 500;
	}
	.dou_yu{
		    color: #fef31f;
			width:100%;
			font-size: 28rpx;
	}
	.yang_loa{
			width:90rpx;
		    padding: 3rpx 0;
		    color: #fff;
		    border-radius: 100rpx;
		    border: 2rpx solid #fff;
			font-size: 24rpx;
			margin:0 auto;
			margin-top:10rpx;
			white-space: nowrap;
	}
	.yang_loa2{
		width:auto;
		padding:3rpx 5rpx;
	}
	.header_box_cen{
		width:60%;
		text-align: center;
	}
	.tou_img{
		width:120rpx;
		border-radius: 100rpx;
		border:4rpx solid #fff;
	}
	.name{
		color:#fff;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		font-weight: 500;
	}
	.dengji{
		color:#fff;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.kefubox{
		width:100%;
		text-align: center;
		margin-top:23rpx;
	}
	.kefu_text{
		    font-size: 24rpx;
		    color: #ff80c0;
		    font-weight: 400;
		    padding: 8rpx 20rpx;
		    background: #fff;
		    border-radius: 100rpx;
			background-color: #fff;
	}
	.she_loa{
		position: absolute;
		right:20rpx;
		top:20rpx;
	}
	.she_img{
		width:35rpx;
	}
	.label{
		background-color: #fff;
		width:100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.label_box{
		width:95%;
		margin:0 auto;
		padding:20rpx 0;
		border-bottom: 2rpx solid #ebebeb;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.label_left{
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
.label_left_img{
	width:35rpx;
	margin-right:10rpx;
}
.label_right_a{
	display: flex;
	justify-content: flex-end;
	align-items: center;
	color:#999;
}
.right_img{
	width:30rpx;
	margin-left:5rpx;
}
.dan_ul{
	background-color: #fff;
	padding:30rpx 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.dan_li{
	width:20%;
	text-align: center;
	position: relative;
}
.dan_li_img{
	width:70rpx;
}
.dan_li_span{
	width:100%;
	text-align: center;
	font-size:24rpx;
}
.badge{
	width:40rpx;
	height:40rpx;
	background-color: #ff80c0;
	color:#fff;
	font-size:22rpx;
	border-radius: 50rpx;
	position: absolute;
	top:-5rpx;
	right:17%;
	z-index: 9;
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.mem_ul{
	width:100%;
}
.mem_li{
	width:100%;
	background-color: #fff;
}
.mem_a{
	border-bottom:2rpx solid rgb(243,243,243);
	width:95%;
	margin:0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding:20rpx 0;
}
.men_a_left{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	font-size: 28rpx;
}
.men_a_left_img{
	width:35rpx;
	margin-right:10rpx;
}
.men_a_right_img{
	width:30rpx;
}
.goods_label{
	margin:20rpx 0;
	width:100%;
	display: flex;
	flex-wrap:wrap;
	justify-content: center;
	align-items: center;
	background-color: #fff;
	padding:20rpx 0;
	font-size:34rpx;
    color: #ff80c0;
	font-weight: 500;;
}
.start_img{
	width:40rpx;
	margin-right:6rpx;
}
.dks{
	    border: 1px solid #ff80c0;
		color:#ff80c0;
		width:90%;
		margin:40rpx auto;
		background-color: #fff;
		border-radius: 10rpx;
		text-align: center;
		padding: 18rpx 0;
		font-size:30rpx;
}
.kmss{
	color:#fff;
	width:90%;
	margin:0 auto 25rpx;
	background-color: #ff80c0;
	border-radius: 10rpx;
	text-align: center;
	padding: 18rpx 0;
	font-size:30rpx;
	margin-top:-15rpx;
}
</style>
